<template>
    <div class="detail page">

        <div class="con" v-if="order">
            <div class="status">{{orderPayStatusOptions[order.mallOrder.payStatus]}}
                {{orderStatusOptions[order.mallOrder.orderStatus]}}
            </div>
            <div class="log border-bottom-1px" v-if="order.mallOrder.orderType ==0">
                <span class="iconfont iconfahuo"></span>
                <div class="log-con">
                    <span class="location">单号 {{order.mallOrder.logNo}}</span>
                    <span @click="clips" :data-clipboard-text="order.mallOrder.logNo" class="time">点我复制单号</span>
                </div>
            </div>
            <div class="address" v-if="order.mallOrder.orderType ==0">
                <span class="iconfont icondizhi"></span>
                <div class="address-con">
                    <div class="user">
                        <span class="name">{{order.mallOrder.userName}}</span>
                        <span class="phone">{{order.mallOrder.mobile}}</span>
                    </div>
                    <div class="address-detail">
                        {{order.mallOrder.address}}
                    </div>
                </div>
            </div>

            <div class="order">
                <!--                <div class="title">-->
                <!--                    <img src="@/assets/avatar.png" class="avatar" alt="">-->
                <!--                    <span class="name">衣香丽影官方旗舰店</span>-->
                <!--                </div>-->
                <div class="order-item" v-for="(item,index) in order.mallOrder.items" :key="index">
                    <order-item :item="item"></order-item>
                    <!--                    <radiusBtn class="btn" color="#A1A1A1" fontSize="0.32rem" borderColor="#DCDCDC" txt="退款"-->
                    <!--                               width="1.733rem" height="0.64rem" bgColor="#FFFFFF"></radiusBtn>-->
                </div>


                <div class="log-fee">
                    <span class="name">实付款</span>
<!--                    <span class="price">¥ {{order.mallOrder.retailPrice}}</span>-->
                    <span class="price">****</span>
                </div>
            </div>

            <div class="order-info">
                <div class="info-title">订单信息</div>
                <div class="txt">
                    <span class="k">订单编号:</span>
                    <span class="v time1" @click="clip" :data-clipboard-text="order.mallOrder.orderNo">{{order.mallOrder.orderNo}}</span>
                </div>

                <div class="txt">
                    <span class="k">订单状态:</span> <span class="v">{{orderStatusOptions[order.mallOrder.orderStatus]}}</span>
                </div>

                <div class="txt" v-if="order.mallOrder.payStatus">
                    <span class="k">支付状态:</span> <span class="v">{{orderPayStatusOptions[order.mallOrder.payStatus]}}</span>
                </div>

                <div class="txt">
                    <span class="k">订单类型:</span> <span
                        class="v">{{orderTypeStatusOptions[order.mallOrder.orderType]}}</span>
                </div>

<!--                <div class="txt">-->
<!--                    <span class="k">商品金额:</span> <span class="v">{{order.mallOrder.price}}</span>-->
<!--                </div>-->

                <div class="txt" v-if="order.mallOrder.point&&order.mallOrder.point>0">
                    <span class="k">使用积分:</span> <span class="v">{{order.mallOrder.point}}</span>
                </div>

                <div class="txt" v-if="order.mallOrder.coupon&&order.mallOrder.coupon>0">
                    <span class="k">优惠券抵扣:</span> <span class="v">{{order.mallOrder.coupon}}</span>
                </div>

                <div class="" v-if="order.mallOrder.orderType==0">
                    <div class="txt">
                        <span class="k">物流公司:</span> <span class="v">{{order.mallOrder.logCompany}}</span>
                    </div>

                    <div class="txt">
                        <span class="k">快递单号:</span> <span class="v">{{order.mallOrder.logNo}}</span>
                    </div>

                    <div class="txt">
                        <span class="k">物流费:</span> <span class="v">{{order.mallOrder.logFee}}</span>
                    </div>

                </div>


                <div class="txt">
                    <span class="k">转出方:</span> <span class="v">{{order.fromUser.name}}</span>
                </div>


                <div class="txt">
                    <span class="k">接收方:</span> <span class="v">{{order.user.name}}</span>
                </div>

                <!--                <div class="txt">-->
                <!--                    <span class="k">订单交易号:</span> <span class="v">34672865238682560</span>-->
                <!--                </div>-->
                <div class="txt">
                    <span class="k">创建时间:</span> <span class="v">{{parseTime(order.mallOrder.orderTime)}}</span>
                </div>
                <div class="txt">
                    <span class="k">付款时间:</span> <span class="v">{{parseTime(order.mallOrder.payTime)}}</span>
                </div>
                <div class="txt">
                    <span class="k">发货时间:</span> <span class="v">{{parseTime(order.mallOrder.deliverTime)}}</span>
                </div>
            </div>
            <!--            <div class="btns border-top-1px">-->
            <!--                <div class="left border-right-1px">-->
            <!--                    <span class="iconfont iconlianximaijia"></span>-->
            <!--                    <span class="txt">联系卖家</span>-->
            <!--                </div>-->
            <!--                <div class="right">-->
            <!--                    <span class="iconfont iconlianximaijia-dingdanxiangqing"></span>-->
            <!--                    <span class="txt">联系客服</span>-->
            <!--                </div>-->
            <!--            </div>-->


            <div class="order-bar" v-if="userId===order.user.id && order.mallOrder.orderFrom === 0 || order.mallOrder.orderType === 0">
                <radiusBtn @click.native="removeOrder(order.mallOrder.id)" v-if="order.mallOrder.cancel" class="btn" color="#a1a1a1" fontSize="0.32rem" borderColor="#a1a1a1" txt="取消订单"
                           width="1.733rem" height="0.69rem" bgColor="#FFFFFF"></radiusBtn>

                <radiusBtn @click.native="unionOrder" v-if="order.mallOrder.payStatus==0" class="btn" color="#F7895E"
                           fontSize="0.32rem"
                           borderColor="#F7895E" txt="立即支付"
                           width="1.733rem" height="0.69rem" bgColor="#FFFFFF"></radiusBtn>
            </div>

        </div>
    </div>
</template>

<script>

    import {getOrder, unionPay} from "../../api/order";
    import orderItem from '@/components/order-item'
    import radiusBtn from '@/components/base/radius-btn'
    import {parseTime} from "@/common/js/time";
    import {config} from "../../util/wx";
    import Wx from '@/wx'
    import {removeOrder} from "../../api/order";
    import * as Dialog from '@/dialog'
    import {mapState} from 'vuex'
    import ClipboardJS from 'clipboard'
    export default {
        activated() {
            // if (this.$route.query.id) {
            this.getOrder()
            //微信配置
            config()
            // }


        },
        mounted() {

        },
        computed: {
            ...mapState({
                userId:state=>state.user.user.userId
            }),
            retailPrice() {
                let price = this.order.mallOrder.price
                if (this.order.mallOrder.logFee != null) {
                    price = price + this.order.mallOrder.logFee
                }
                if (this.order.mallOrder.coupon != null) {
                    price = price - this.order.mallOrder.coupon
                }
                return price
            }
        },
        components: {
            orderItem, radiusBtn
        },
        data() {
            return {
                payConfig: null,
                log: {
                    location: "长沙转运中心公司 已发出，下一站 衡阳转运中心",
                    time: "2019-09-20  16：39：18"
                },
                order: null,
                orderStatusOptions: ["新订单", "配货中", "已发货", "已收货", "退款中", "已退款", "已拒绝", "已完成", "已取消"],
                orderPayStatusOptions: ["未支付", "已支付"],
                orderTypeStatusOptions: ["发货", "转货"],
                flag:true
            }
        },
        methods: {
            logistics(logNo){
                if (!logNo){
                    showError('订单还未发货')
                    return
                }
                this.$router.push({
                    path:`/order/logistics?logNo=${logNo}`
                })
            },
            clip(){
                var clipboard =  new ClipboardJS('.time1')
                clipboard.on('success',e=> {

                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })

            },
            clips(){
                var clipboard =  new ClipboardJS('.time');
                clipboard.on('success', function(e) {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);
                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })
            },
            removeOrder(id){
                if(this.flag==false){
                   return
                }
                this.flag = false
                // Dialog.showCorrect("暂时关闭,11月22日开放!")
                removeOrder(id).then(res=>{
                    Dialog.showCorrect("取消成功!")
                    this.$router.back()
                    this.flag =true
                })
            },
            getOrder() {
                getOrder(this.$route.query.id, this.$route.query.orderNo).then(res => {

                    this.order = res.data
                })
            },
            parseTime(time) {
                return parseTime(time)
            },
            unionOrder() {
                if (this.payConfig) {
                    this.wxPay()
                } else {
                    unionPay(this.order.mallOrder.orderNo).then(res => {
                        this.payConfig = res.data
                        this.wxPay()
                    })
                }
            },
            wxPay() {
                Wx.pay(this.payConfig).then(res => {
                    // Dialog.showCorrect("操作成功")
                    if (res.data == "ok") {
                        this.getOrder()
                    }

                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .detail
        height 100%
        background $page-bg
        z-index 2
        background url("~@/assets/cbg.png") no-repeat #f0f5f5
        background-size 100% auto

        .con
            padding 0 10px
            /*padding-top 10px*/
            padding-bottom 44px

            .status
                color #FFFFFF
                height 40px
                text-align left
                line-height 40px
                font-size 14px
                font-weight 300

            .log
                background-color white
                border-radius 5px 5px 0 0
                display flex
                border-color #DCDCDC
                padding 15px 11px
                align-items center

                .iconfont
                    color #42A3CC
                    font-size 24px
                    flex 0 0 24px

                .log-con
                    display flex
                    flex-direction column
                    margin-left 9px

                    .location
                        font-size: 11px;
                        font-weight: 300;
                        color: rgba(66, 163, 204, 1);
                        line-height 11px
                        margin-bottom 10px

                    .time
                        color #A1A1A1
                        font-size 10px
                        font-weight 300

            .address
                background-color white
                border-radius 0 0 5px 5px
                display flex
                align-items center
                padding 13px 11px 12px

                .iconfont
                    color #F7895E
                    font-size 24px
                    margin-right 8px

                .address-con
                    .user
                        font-size 0

                        .name
                            color #6F6F6F
                            font-size: 11px;
                            font-weight: 300;

                        .phone
                            color #A1A1A1
                            font-size 11px
                            font-weight 300
                            margin-left 27px

                    .address-detail
                        padding-right 20px
                        margin-top 7px
                        color #6F6F6F
                        font-size 11px
                        font-weight: 300;
                        line-height 15px

            .order
                background-color white
                margin-top 10px
                border-radius 5px
                padding 10px 10px 0

                .title
                    margin-bottom 10px
                    height 24px
                    /*padding 0 8px*/

                    .avatar
                        vertical-align bottom
                        width 24px
                        height 24px
                        margin-right 6px
                        border-radius 50%

                    .name
                        vertical-align bottom
                        color #4E3D07
                        font-size 14px
                        font-weight 300
                        line-height 24px

                .order-item
                    position relative

                    .btn
                        position absolute
                        right 0px
                        bottom 0

                .log-fee
                    /*padding-left 2px*/
                    display flex
                    justify-content space-between
                    height 44px
                    line-height 44px
                    font-size 12px

                    .name
                        color #6F6F6F

                    .price
                        color #F7895E

            .order-info
                padding 10px 5px
                margin-top 10px
                border-radius 5px 5px 0 0
                background-color white

                .info-title
                    height 12px
                    font-size 11px
                    font-weight: 300;
                    padding-left 5px
                    border-left 2Px solid #F7895E

                .txt
                    margin-left 5px
                    margin-top 10px
                    color #6F6F6F
                    font-size 10px
                    font-weight: 300;
                    line-height 10px

                    .k
                        display inline-block
                        width 60px

            .btns
                margin-bottom 8px
                border-radius 0 0 5px 5px
                border-color #DCDCDC
                height 40px
                background-color white
                display flex
                align-items center

                .left
                    border-right 1Px solid #DCDCDC

                .left, .right
                    display flex
                    align-items center
                    justify-content center
                    flex 1
                    height 24px
                    font-size 11px
                    color #6F6F6F

                    .iconfont
                        margin-right 5px
                        font-size 15px
                        color #42A3CC

            .order-bar
                display flex
                align-items center
                position fixed
                left 0
                right 0
                bottom 0
                background-color white
                height 44px
                justify-content flex-end
                padding-right 10px

                .btn
                    margin-left 10px


</style>
